<template>

  <div v-if="loaded" class="meta-info-box">
    <app-avatar size="40px" v-bind="info" />
    <div class="info-box">
      <div class="nickname">{{ info.username }}</div>
      <div class="meta-box">
        <span class="time">{{ article.gmtCreated }}</span>
        <span class="views">阅览次数&nbsp;{{ article.views }}</span>
      </div>
      <div class="right-slot">
        <div
          @click="$emit('like')"
          :class="{ active: hadLike }"
          class="like-btn"
        />
         <div
          @click="$emit('collection')"
          :class="{ active: hadCollect }"
          class="collection-btn"
        />
       <div
          @click="$emit('report')"
          class="report-btn"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getUserInfoDigest as getInfo } from '/src/api/user'

const props = defineProps({
  article: { type: Object, required: true },
  hadLike: { type: Boolean, default: false },
  hadCollect: { type: Boolean, default: false },
})

const loaded = ref(false)
const info = ref(null)
  
getInfo(props.article.userId).then((res) => {
  info.value = res.result.records[0]
  loaded.value = true
})

</script>

<style lang="scss" scoped>
@import '../../styles/variables';

.meta-info-box {
  min-height: 50px;
  padding: 4px;
  border-radius: 4px;
}

.meta-info-box > .info-box {
  position: relative;
  padding-left: 12px;
  overflow: hidden;

  > .nickname {
    line-height: 1.5;
    color: $name-text-color;
  }

  > .meta-box {
    margin-top: 2px;
    font-size: 14px;
    line-height: 22px;
    color: $mild-gray;

    & > .time::after {
      margin: 0 8px;
      color: $mild-gray;
      content: '·';
    }
    .views{
      float:right
    }
  }

  > .right-slot {
    position: relative;
    display:flex;
    float: right;
    & > .like-btn {
      width: 32px;
      height: 32px;
      cursor: pointer;
      background-image: url('/src/icons/like.png');
      background-size: 100%;
      transition: all 180ms ease-out;

      &:hover {
        animation: shake 300ms linear infinite alternate;
      }

      &.active {
        background-image: url('/src/icons/like-exist.png');
        animation: none;
      }
    }
    & > .collection-btn {
      width: 32px;
      height: 32px;
      cursor: pointer;
      background-image: url('/src/icons/collection.png');
      background-size: 100%;
      transition: all 180ms ease-out;

      &:hover {
        animation: shake 300ms linear infinite alternate;
      }

      &.active {
        background-image: url('/src/icons/collection-exist.png');
        animation: none;
      }
    }
      & > .report-btn {
      margin-top:5px;
      margin-left:3px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      background-image: url('/src/icons/report.png');
      background-size: 100%;
    }
  }
}

@keyframes shake {
  from {
    transform: rotate(-1deg);
    //transform-origin: 40% 40%;
  }
  to {
    transform: rotate(3deg) scale(1.03);
  }
}
</style>
